<template>
    <div>
        <a-modal
            title="变量属性"
            :visible="visible"
            width="800px"
            :confirm-loading="confirmLoading"
            ok-text="确定"
            cancel-text="取消"
            @ok="handleOk"
            @cancel="handleCancel"
        >
            <a-form-model
                ref="form"
                :model="form"
                :label-col="{ span: 6 }"
                :wrapper-col="{ span: 18 }"
            >
                <a-tabs v-model="activePropertiesTab" class="inner-tabs">
                    <a-tab-pane key="basic" tab="基本属性">
                        <a-row :gutter="16">
                            <a-col :span="12">
                                <a-form-model-item label="名称">
                                    <a-input-group compact>
                                        <a-input
                                            v-model="form.name"
                                            placeholder="请输入变量名称(仅字母和数字)"
                                            style="width: calc(100% - 130px);"
                                        />
                                        <a-button @click="showCodeTypeModal">
                                            选择HJ212Code
                                        </a-button>
                                    </a-input-group>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-model-item label="别名">
                                    <a-input
                                        v-model="form.extra.alias"
                                        placeholder="请输入变量别名(支持中文)"
                                    />
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-model-item label="数据类型">
                                    <a-select
                                        v-model="form.extra.dataType"
                                        placeholder="请选择数据类型"
                                    >
                                        <a-select-option
                                            v-for="option in dataTypeOptions"
                                            :key="option"
                                            :value="option"
                                        >
                                            {{ option }}
                                        </a-select-option>
                                    </a-select>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-model-item label="小数位">
                                    <a-input-number
                                        v-model="form.extra.decimalPlaces"
                                        :min="0"
                                        style="width: 100%;"
                                    />
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-model-item label="单位">
                                    <a-input v-model="form.extra.unit" />
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-model-item label="量程转换系数">
                                    <a-input-number
                                        v-model="form.extra.conversionFactor"
                                        style="width: 100%;"
                                    />
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-model-item label="偏移量">
                                    <a-input-number
                                        v-model="form.extra.offset"
                                        style="width: 100%;"
                                    />
                                </a-form-model-item>
                            </a-col>                            
                        </a-row>
                    </a-tab-pane>
                    <a-tab-pane key="alarm" tab="报警属性" force-render>
                        <a-row :gutter="16">
                            <a-col :span="12">
                                <a-form-model-item label="条件">
                                    <a-input-group compact>
                                        <a-select
                                            v-model="form.extra.alarm.conditionOperator"
                                            style="width: 30%;"
                                        >
                                            <a-select-option
                                                v-for="option in alarmConditionOperatorOptions"
                                                :key="option"
                                                :value="option"
                                            >
                                                {{ option }}
                                            </a-select-option>
                                        </a-select>
                                        <a-input
                                            v-model="form.extra.alarm.conditionValue"
                                            style="width: 70%;"
                                        />
                                    </a-input-group>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-model-item label="事件标识符">
                                    <a-input v-model="form.extra.alarm.eventIdentifier" />
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                    </a-tab-pane>
                    <a-tab-pane key="hj212" tab="HJ212" force-render>
                        <a-row :gutter="16">
                            <a-col :span="12">
                                <a-form-model-item label="信号类型">
                                    <a-select v-model="form.extra.hj212.signalType">
                                        <a-select-option
                                            v-for="option in signalTypeOptions"
                                            :key="option"
                                            :value="option"
                                        >
                                            {{ option }}
                                        </a-select-option>
                                    </a-select>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="12" />
                            <a-col :span="12">
                                <a-form-model-item label="量程上限">
                                    <a-input v-model="form.extra.hj212.rangeUpper" />
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-model-item label="量程下限">
                                    <a-input v-model="form.extra.hj212.rangeLower" />
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-model-item label="报警上限">
                                    <a-input v-model="form.extra.hj212.alarmUpper" />
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-model-item label="报警下限">
                                    <a-input v-model="form.extra.hj212.alarmLower" />
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="24">
                                <a-form-model-item
                                    label="上报配置"
                                    :label-col="{ span: 3 }"
                                    :wrapper-col="{ span: 21 }"
                                >
                                    <a-checkbox-group v-model="form.extra.hj212.reportConfig">
                                        <a-checkbox value="realtime">实时值</a-checkbox>
                                        <a-checkbox value="realtimeFlag">实时Flag</a-checkbox>
                                        <a-checkbox value="average">平均值</a-checkbox>
                                        <a-checkbox value="min">最小值</a-checkbox>
                                        <a-checkbox value="max">最大值</a-checkbox>
                                        <a-checkbox value="cumulative">累积值</a-checkbox>
                                    </a-checkbox-group>
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                    </a-tab-pane>
                </a-tabs>

                <div v-if="activePropertiesTab === 'basic'">
                    <a-tabs v-model="form.extra.protocol.type" class="inner-tabs">
                        <a-tab-pane key="general" tab="一般协议">
                            <div v-if="!isOpcEnabled">
                                <!-- 非OPC协议显示类型和地址 -->
                                <a-row :gutter="16">
                                    <a-col :span="24">
                                        <a-form-model-item
                                            label="类型"
                                            :label-col="{ span: 3 }"
                                            :wrapper-col="{ span: 21 }"
                                        >
                                            <div
                                                style="display: flex; align-items: center; gap: 16px;"
                                            >
                                                <a-select
                                                    v-model="form.extra.general.type"
                                                    placeholder="请选择类型"
                                                    style="width: 200px;"
                                                >
                                                    <a-select-option
                                                        v-for="option in typeOptions"
                                                        :key="option"
                                                        :value="option"
                                                    >
                                                        {{ option }}
                                                    </a-select-option>
                                                </a-select>
                                                <a-checkbox
                                                    :checked="
                                                        form.extra.general.type_rw === 1 ||
                                                            form.extra.general.type_rw === 3
                                                    "
                                                    @change="handleReadWriteChange('read', $event)"
                                                >
                                                    可读
                                                </a-checkbox>
                                                <a-checkbox
                                                    :checked="
                                                        form.extra.general.type_rw === 2 ||
                                                            form.extra.general.type_rw === 3
                                                    "
                                                    @change="handleReadWriteChange('write', $event)"
                                                >
                                                    可写
                                                </a-checkbox>
                                            </div>
                                        </a-form-model-item>
                                    </a-col>
                                </a-row>
                                <a-row :gutter="16">
                                    <a-col :span="24">
                                        <a-form-model-item
                                            label="地址"
                                            :label-col="{ span: 3 }"
                                            :wrapper-col="{ span: 21 }"
                                        >
                                            <div style="display: flex; align-items: center;">
                                                <a-input
                                                    v-model="form.extra.general.address"
                                                    style="width: 200px; margin-right: 16px;"
                                                />
                                                <a-checkbox v-model="form.extra.general.isHex" @change="handleHexChange">
                                                    十六进制
                                                </a-checkbox>
                                            </div>
                                        </a-form-model-item>
                                    </a-col>
                                </a-row>
                            </div>
                        </a-tab-pane>
                        <a-tab-pane
                            key="lt645"
                            tab="LT645-2007电表协议"
                            force-render
                            :disabled="!isLt645Enabled"
                        >
                            <a-row :gutter="16">
                                <a-col :span="12">
                                    <a-form-model-item label="规则总类">
                                        <a-select
                                            v-model="form.extra.protocol.lt645.ruleCategory"
                                            @select="handleLt645RuleCategoryChange"
                                        >
                                            <a-select-option
                                                v-for="option in lt645RuleCategoryOptions"
                                                :key="option"
                                                :value="option"
                                            >
                                                {{
                                                    option === "energy"
                                                        ? "电能"
                                                        : option === "voltage"
                                                            ? "电压"
                                                            : option
                                                }}
                                            </a-select-option>
                                        </a-select>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-model-item label="规则ID">
                                        <a-select v-model="form.extra.protocol.lt645.ruleId">
                                            <a-select-option
                                                v-for="option in lt645RuleIdOptions"
                                                :key="option"
                                                :value="option"
                                            >
                                                {{
                                                    option === "totalActiveEnergy"
                                                        ? "当前组合有功总电能"
                                                        : option
                                                }}
                                            </a-select-option>
                                        </a-select>
                                    </a-form-model-item>
                                </a-col>
                            </a-row>
                        </a-tab-pane>

                        <a-tab-pane
                            key="hj212_protocol"
                            tab="Hj212自定义协议"
                            force-render
                            :disabled="!isHj212Enabled"
                        >
                            <a-form-model-item
                                label="数据查询指令:"
                                :label-col="{ span: 4 }"
                                :wrapper-col="{ span: 20 }"
                            >
                                <a-input
                                    v-model="form.extra.protocol.general.queryCommand"
                                    placeholder="请输入十六进制数，如：01 03 00 00 00 01 84 0A"
                                />
                            </a-form-model-item>
                            <a-row :gutter="16" class="hj212-inline-row">
                                <a-col :span="8">
                                    <div class="inline-field">
                                        <label class="field-label">报文标记:</label>
                                        <a-input
                                            v-model="form.extra.protocol.general.messageStart"
                                            placeholder="如：01 03"
                                        />
                                    </div>
                                </a-col>
                                <a-col :span="8">
                                    <div class="inline-field">
                                        <label class="field-label">数值起始:</label>
                                        <a-input-number
                                            v-model="form.extra.protocol.general.valueStartByte"
                                            :min="0"
                                            style="width: 100%;"
                                            placeholder="如：3"
                                        />
                                    </div>
                                </a-col>
                                <a-col :span="8">
                                    <div class="inline-field">
                                        <label class="field-label">数据全字:</label>
                                        <a-input-number
                                            v-model="form.extra.protocol.general.dataLength"
                                            :min="0"
                                            style="width: 100%;"
                                            placeholder="如：2"
                                        />
                                    </div>
                                </a-col>
                            </a-row>
                        </a-tab-pane>
                    </a-tabs>
                </div>
            </a-form-model>
        </a-modal>

        <!-- 编码类型选择弹框 -->
        <code-type-modal
            :visible="codeTypeModalVisible"
            @cancel="handleCodeTypeModalCancel"
            @factors-selected="handleFactorsSelected"
        />
    </div>
</template>

<script>
import tabManager from '@/api/tab-manager'
import CodeTypeModal from './CodeTypeModal.vue'
import createVariableProperties from './VariableProperties.js'
import { mapGetters } from 'vuex'
import _ from 'lodash'

export default {
    name: 'VariablePropertiesModal',
    components: {
        CodeTypeModal
    },
    props: {
        visible: { type: Boolean, required: true },
        variableData: { type: Object, default: () => ({}) },
        portProtoType: { type: String, default: '' }
    },
    data() {
        const initialFormState = createVariableProperties()
        return {
            form: initialFormState,
            confirmLoading: false,
            initialFormState,
            activePropertiesTab: 'basic',
            // 数据类型选项，由后端提供
            dataTypeOptions: [
                'bool',
                'uint16',
                'uint32',
                'uint64',
                'int16',
                'int32',
                'int64',
                'float',
                'double',
                'string',
                'byte',
                'bit'
            ],
            typeOptions: [],
            lt645RuleCategoryOptions: ['energy', 'voltage'],
            // LT645协议规则ID选项
            lt645RuleIdOptions: ['totalActiveEnergy'],
            // 报警条件操作符选项
            alarmConditionOperatorOptions: ['>', '>=', '<', '<=', '!=', '=='],
            // 信号类型选项
            signalTypeOptions: ['非模拟量', '4-20ma', '0-40ma', '0-5v', '0-10v'],
            // 编码类型弹框控制
            codeTypeModalVisible: false
        }
    },
    
    computed: {
        ...mapGetters('groupTree', ['deviceConnection', 'selectedDeviceInfo']),
        // 判断是否显示LT645相关选项
        isLt645Enabled() {
            return this.portProtoType === '3006'
        },
        // 判断是否显示OPC相关选项
        isOpcEnabled() {
            return this.portProtoType === '3018'
        },
        // 判断是否是hj212类型网关
        isHj212Enabled() {
            return this.selectedDeviceInfo.gatewayType === 'HJ212'
        }
    },
    watch: {
        visible(val) {
            if (val) {
                // 使用深度合并：以模板为基础，用后端数据覆盖对应字段
                if (this.variableData && Object.keys(this.variableData).length) {
                    // 1. 克隆完整的模板结构（确保所有字段都有默认值）
                    const template = _.cloneDeep(this.initialFormState)
                    // 2. 深度合并后端数据（只覆盖后端返回的字段，其他保持默认值）
                    this.form = _.merge(template, _.cloneDeep(this.variableData))
                    console.log('✅ [VariablePropertiesModal] 数据合并完成:', {
                        模板字段: Object.keys(template.extra.protocol),
                        后端数据: this.variableData,
                        合并结果: this.form
                    })
                } else {
                    this.form = _.cloneDeep(this.initialFormState)
                }
                // 加载所有选项数据
                this.loadDataTypeOptions()
                this.loadTypeOptions()
                this.loadLt645Options()
            }
        },
        portProtoType: {
            handler(newProtoType) {
                console.log(
                    '🔄 [VariablePropertiesModal] 端口协议类型变化:',
                    newProtoType
                )
                // 根据端口协议类型更新表单或显示相关选项
                this.handlePortProtoTypeChange(newProtoType)
            },
            immediate: true
        }
    },
    methods: {
        handleOk() {
            this.confirmLoading = true
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.$emit('ok', this.form)
                    this.confirmLoading = false
                } else {
                    this.confirmLoading = false
                    return false
                }
            })
        },
        handleCancel() {
            this.$emit('cancel')
        },
        // 加载数据类型选项（由后端提供）
        async loadDataTypeOptions() {
            try {
                console.log('🔍 [VariablePropertiesModal] 开始加载数据类型选项')
                // 这里可以调用后端接口获取数据类型选项
                // const response = await tabManager.monitor.getDataTypeOptions()
                // if (response && response.code === 0) {
                //     this.dataTypeOptions = response.data
                // }

                // 目前使用静态数据，实际应用中应该从后端获取
                console.log(
                    '✅ [VariablePropertiesModal] 数据类型选项加载完成:',
                    this.dataTypeOptions
                )
            } catch (error) {
                console.error(
                    '❌ [VariablePropertiesModal] 加载数据类型选项失败:',
                    error
                )
                this.$message.error('加载数据类型选项失败')
            }
        },
        // 加载类型选项（非OPC协议使用，由后端提供）
        async loadTypeOptions() {
            try {
                console.log(
                    '🔍 [VariablePropertiesModal] 开始加载类型选项',
                    this.portProtoType
                )
                // 这里可以调用后端接口获取类型选项
                const response = await tabManager.monitor.getVarRegistersTypeOptions(
                    this.portProtoType
                )
                if (response && response.code === 0) {
                    let rawOptions = JSON.parse(response.data)
                    
                    // 过滤重复数据 - 确保数组元素唯一性
                    if (Array.isArray(rawOptions)) {
                        this.typeOptions = [...new Set(rawOptions)]
                        console.log(
                            '🧹 [VariablePropertiesModal] 已过滤重复数据',
                            { 原始数量: rawOptions.length, 去重后数量: this.typeOptions.length }
                        )
                    } else {
                        this.typeOptions = rawOptions || []
                    }
                    
                    if (this.typeOptions.length > 0) {
                        if (this.variableData && this.variableData.extra.general.type) {
                            this.form.extra.general.type = this.variableData.extra.general.type
                        } else {
                            this.form.extra.general.type = this.typeOptions[0]
                        }
                    }
                }
                // 目前使用静态数据，实际应用中应该从后端获取
                console.log(
                    '✅ [VariablePropertiesModal] 类型选项加载完成:',
                    this.typeOptions
                )
            } catch (error) {
                console.error('❌ [VariablePropertiesModal] 加载类型选项失败:', error)
                this.$message.error('加载类型选项失败11111')
            }
        },
        // 加载LT645协议选项（由后端提供）
        async loadLt645Options() {
            try {
                console.log('🔍 [VariablePropertiesModal] 开始加载LT645协议选项')
                // 这里可以调用后端接口获取LT645选项
                const response = await tabManager.monitor.getLt645Options()
                console.log(
                    '🔍 [VariablePropertiesModal] 获取LT645协议选项数据:',
                    response
                )
                if (response && response.code === 0) {
                    const data = JSON.parse(response.data)
                    this.lt645RuleCategoryOptions = data.ruleCategories
                    this.lt645RuleIdOptions = data.ruleIds
                }

                // 需要更改默认值
                if (
                    this.lt645RuleCategoryOptions.length > 0 &&
                    this.lt645RuleIdOptions.length > 0
                ) {
                    this.form.extra.protocol.lt645.ruleCategory =
                        this.lt645RuleCategoryOptions[0]
                    this.form.extra.protocol.lt645.ruleId = this.lt645RuleIdOptions[0]
                }

                // 目前使用静态数据，实际应用中应该从后端获取
                console.log('✅ [VariablePropertiesModal] LT645协议选项加载完成:', {
                    ruleCategories: this.lt645RuleCategoryOptions,
                    ruleIds: this.lt645RuleIdOptions
                })
            } catch (error) {
                console.error(
                    '❌ [VariablePropertiesModal] 加载LT645协议选项失败:',
                    error
                )
                this.$message.error('加载LT645协议选项失败')
            }
        },

        // 处理端口协议类型变化
        handlePortProtoTypeChange(protoType) {
            console.log(
                '🔄 [VariablePropertiesModal] 处理端口协议类型变化:',
                protoType
            )

            // 根据不同的协议类型执行不同的逻辑
            switch (protoType) {
                case '3006':
                    // LT645-2007电表协议
                    console.log(
                        '📋 [VariablePropertiesModal] 启用LT645-2007电表协议选项'
                    )
                    // 可以在这里设置默认的LT645相关配置
                    if (!this.form.extra.protocol.lt645) {
                        this.form.extra.protocol.lt645 = {
                            ruleCategory: 'energy',
                            ruleId: 'totalActiveEnergy'
                        }
                    }
                    break
                case '3018':
                    // OPC协议
                    console.log('📋 [VariablePropertiesModal] 启用OPC协议选项')
                    // 可以在这里设置默认的OPC相关配置
                    break
                default:
                    // 非OPC协议，设置默认的一般协议配置
                    console.log(
                        '📋 [VariablePropertiesModal] 使用非OPC协议，设置默认配置' +
                            this.form
                    )
                    if (!this.form.extra.general) {
                        this.form.extra.general = {
                            type: '',
                            address: '',
                            isHex: true
                        }
                    }
                    break
            }
        },

        // 显示编码类型选择弹框
        showCodeTypeModal() {
            console.log('🔄 [VariablePropertiesModal] 显示编码类型选择弹框')
            this.codeTypeModalVisible = true
        },

        // 处理编码类型弹框取消
        handleCodeTypeModalCancel() {
            console.log('❌ [VariablePropertiesModal] 取消编码类型选择')
            this.codeTypeModalVisible = false
        },

        // 处理因子选择
        handleFactorsSelected(selectedFactors) {
            console.log(
                '🔄 [VariablePropertiesModal] 处理选中的因子:',
                selectedFactors
            )

            if (selectedFactors && selectedFactors.length > 0) {
                // 取第一个选中的因子
                const factor = selectedFactors[0]

                // 填充变量名称和相关信息
                this.form.name = factor.code
                this.form.extra.alias = factor.chineseName
                this.form.extra.unit = factor.emissionUnit

                // 根据数据类型设置相应的表单字段
                if (factor.concentrationDataType) {
                    // 解析数据类型，例如 'N5.2' 表示数字类型，总长度5，小数位2
                    const dataTypeMatch =
                        factor.concentrationDataType.match(/N(\d+)\.(\d+)/)
                    if (dataTypeMatch) {
                        this.form.dataType = 'float'
                        this.form.decimalPlaces = parseInt(dataTypeMatch[2])
                    } else {
                        this.form.dataType = 'int32'
                        this.form.decimalPlaces = 0
                    }
                }

                console.log('✅ [VariablePropertiesModal] 因子信息已填充到表单')
            }
        },

        async handleLt645RuleCategoryChange(value) {
            try {
                console.log('🔄 [VariablePropertiesModal] LT645规则总类切换:', value)
                const response = await tabManager.monitor.getLt645Options({
                    ruleCategory: value
                })
                console.log(
                    '🔍 [VariablePropertiesModal] 获取LT645协议选项数据:',
                    response
                )
                if (response && response.code === 0) {
                    const data = JSON.parse(response.data)
                    this.lt645RuleIdOptions = data.ruleIds
                    if (
                        !this.lt645RuleIdOptions.includes(
                            this.form.extra.protocol.lt645.ruleId
                        )
                    ) {
                        this.form.extra.protocol.lt645.ruleId =
                            this.lt645RuleIdOptions[0] || ''
                    }
                } else {
                    this.lt645RuleIdOptions = []
                }
                console.log(
                    '✅ [VariablePropertiesModal] 已刷新规则ID选项:',
                    this.lt645RuleIdOptions
                )
            } catch (error) {
                console.error(
                    '❌ [VariablePropertiesModal] 切换规则总类刷新规则ID失败:',
                    error
                )
                this.$message.error('加载规则ID失败')
            }
        },

        // 处理读写权限复选框变化
        handleReadWriteChange(type, event) {
            const isChecked = event.target.checked
            const currentTypeRw = this.form.extra.general.type_rw

            if (type === 'read') {
                if (isChecked) {
                    // 选中可读
                    if (currentTypeRw === 2) {
                        // 当前是可写，变为读写
                        this.form.extra.general.type_rw = 3
                    } else {
                        // 变为可读
                        this.form.extra.general.type_rw = 1
                    }
                } else {
                    // 取消可读
                    if (currentTypeRw === 3) {
                        // 当前是读写，变为可写
                        this.form.extra.general.type_rw = 2
                    } else {
                        // 当前是可读，取消后设为可写（保证至少有一个权限）
                        this.form.extra.general.type_rw = 2
                    }
                }
            } else if (type === 'write') {
                if (isChecked) {
                    // 选中可写
                    if (currentTypeRw === 1) {
                        // 当前是可读，变为读写
                        this.form.extra.general.type_rw = 3
                    } else {
                        // 变为可写
                        this.form.extra.general.type_rw = 2
                    }
                } else {
                    // 取消可写
                    if (currentTypeRw === 3) {
                        // 当前是读写，变为可读
                        this.form.extra.general.type_rw = 1
                    } else {
                        // 当前是可写，取消后设为可读（保证至少有一个权限）
                        this.form.extra.general.type_rw = 1
                    }
                }
            }

            console.log('🔄 [VariablePropertiesModal] 读写权限变化:', {
                type,
                isChecked,
                oldValue: currentTypeRw,
                newValue: this.form.extra.general.type_rw
            })
        },

        // 处理十六进制复选框变化 - 使用 native JavaScript methods for hex conversion
        handleHexChange() {
            const address = this.form.extra.general.address
            if (!address) {
                console.log('⚠️ [VariablePropertiesModal] 地址为空，跳过转换')
                return
            }

            try {
                if (this.form.extra.general.isHex) {
                    // 十进制转十六进制
                    const decimal = parseInt(address, 10)
                    if (isNaN(decimal)) {
                        throw new Error('无效的十进制数值')
                    }
                    this.form.extra.general.address = '0x' + decimal.toString(16).toUpperCase()
                } else {
                    // 十六进制转十进制
                    const decimal = parseInt(address, 16)
                    if (isNaN(decimal)) {
                        throw new Error('无效的十六进制数值')
                    }
                    this.form.extra.general.address = decimal.toString(10)
                }
                console.log('✅ [VariablePropertiesModal] 地址转换成功:', this.form.extra.general.address)
            } catch (error) {
                console.error('❌ [VariablePropertiesModal] 地址转换失败:', error)
                this.$message.error('地址转换失败，请检查格式')
                // 发生错误时保持原值不变
                this.form.extra.general.address = address
            }
        }
    }
}
</script>

<style scoped>
.section-header {
    background-color: #f0f2f5;
    padding: 8px 16px;
    font-weight: 500;
    margin-bottom: 16px;
    border-radius: 4px;
}
.inner-tabs {
    border: 1px solid #d9d9d9;
    padding: 0 16px 16px;
    border-radius: 4px;
    margin-bottom: 24px;
}
.multi-field-row .ant-form-item {
    display: flex;
    flex-direction: column;
}
.multi-field-row .ant-form-item >>> .ant-form-item-label {
    text-align: left;
    padding-bottom: 4px;
    line-height: 1.5;
}
.hj212-fields-row .ant-form-item {
    margin-bottom: 12px;
}
.hj212-fields-row .ant-form-item >>> .ant-form-item-label {
    text-align: left;
    padding-bottom: 4px;
    line-height: 1.5;
    padding-left: 0 !important;
}
.hj212-fields-row .ant-form-item >>> .ant-form-item-label > label {
    text-align: left !important;
}
.hj212-fields-row .ant-form-item >>> .ant-form-item-label > label::after {
    content: none;
}
.hj212-inline-row {
    margin-bottom: 16px;
}
.hj212-inline-row .inline-field {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}
.hj212-inline-row .field-label {
    text-align: right;
    flex-shrink: 0;
    min-width: 70px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
}
.hj212-inline-row .ant-select,
.hj212-inline-row .ant-input-number,
.hj212-inline-row .ant-input {
    flex: 1;
}
.ant-form-item {
    margin-bottom: 12px;
}
</style> 